<template>

	<div class="tag">
		<el-card class="box-card">
		<tagCloud :data="label[0]"></tagCloud>
		<div class="label">
			<el-badge v-for="item in label[0]" :key="item.dl_id" :value="item.dl_count" class="item">
				<el-button v-if="item.dl_count !=='' " :style="randomRgb()" @click="Tag(item)"> {{ item.dl_name }} </el-button>
				<el-button  disabled  v-else  :style="randomRgb()" > {{ item.dl_name }} </el-button>
			</el-badge>
		</div>
	</el-card>
	<div class="box-card tag cardcont" v-if="cardshow===true">
			<div>
                <Cardcover  :cardcont="cardcont"/>
                <div class="pagination">
                    <!-- <el-pagination ref="pagination" v-model:current-page="currentPage" v-model:page-size="pageSize"
                         :small="small" :disabled="disabled"  background @prev-click="previouspage"  @next-click="nextpage"
                            layout=" prev, pager, next, " :total="total"  @current-change="currentpage"
                             /> -->
                    <el-pagination layout="prev, pager, next" @current-change="currentpage" :page-size="pageSize"
                        @prev-click="previouspage(currentPage, 5)" @next-click="nextpage(currentPage, 5)"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            </div>
	</div>

</template>

<script lang="ts" setup>
import { computed, ref ,reactive} from 'vue'
import Cardcover from '@/components/Cardcover.vue';
import tagCloud from '@/components/Tag.vue'
import api from '@/api/label'
import { dataStore } from '@/stores/data'
const { label,randomRgb } = dataStore()

const cardcont =reactive([]) as any
const cardshow = ref(false)
const currentPage = ref(1) as any
const dl_id = ref() as any
const pageSize = ref(5) as any
const total = ref(0) as any

api.labelcount({}).then((res: any) => {
	for (let i = 0; i < res.data.data.length; i++) {
		if (res.data.data[i].dl_count===null) {
			res.data.data[i].dl_count=''
		}
	}
	label.push(res.data.data)
}).catch(err => {
	console.log(err);
})

const Tag=(item:any)=>{
	dl_id.value=item.dl_id
	api.labeldata({ page:0, limit: 5,dl_id:item.dl_id}).then((res: any) => {
		cardshow.value=true
		cardcont[0] = res.data.data
		total.value = res.data.total[0].total
}).catch(err => {
	console.log(err);

})

}


const coverdata = (page:any,limit:any) => {
    page--
    api.labeldata({ page:page, limit: limit,dl_id:dl_id.value}).then((res: any) => {
        cardcont[0] = res.data.data
    }).catch(err => {
        console.log(err)
    })
}
const currentpage = (val: number) => {      //数据发生改变事件
    currentPage.value = val
    coverdata(val,5)
}
const previouspage = (val: number ,size:any) => {   //上一页事件
    currentPage.value--
}
const nextpage = (val: any, size: any) => {     //下一页事件
    currentPage.value++
}
</script>
<style lang="scss" scoped>
.tag {
	text-align: center;

	.label{
		margin: 80px auto;
		line-height: 3;
	.item {
		margin-right: 20px;
		
		button {
			color: #fff;
		}

	}		
	}
}
.box-card{
	width: 100%;
}
:deep(.el-badge__content.is-fixed){
	top: 10px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 15px auto;
}

</style>